/* eslint-disable jsx-a11y/alt-text */
import React from 'react'
import { withRouter } from "react-router-dom"
import "../assets/css/relist/comment.css"

//歌单评论
class MusicComment extends React.Component {
    constructor(props) {
        super(props)
        //传递路由参数id
        props.getComment(this.props.location.search.replace("?id=", "") || "")
    }
    componentWillMount() {
        this.props.getComment(this.props.location.search.replace("?id=", "") || "")
    }

    render() {
        let ele = null;
        const { musicComment } = this.props || { musicComment: [] };
        try {
            ele = <div>
                {musicComment.map((item, index) => {
                    return (
                        <div key={item.commentId}>
                            <div className="comments">
                                <div className="userheaders"><img src={item.user.avatarUrl} alt="" className="headerimg" /></div>
                                <div className="usermsg">
                                    <div className="nicknames">{item.user.nickname}</div>
                                    <div className="zan">{item.likedCount}<img src={[require("../assets/image/zan.png")]} className="tips" /></div>
                                </div>
                            </div>
                            <div className="content">
                                <div className="comment">{item.content}</div>
                            </div>
                        </div>
                    )
                })}
            </div>
        } catch (e) { }
        return (
            ele
        )
    }
}

export default withRouter(MusicComment);